<template>
	<view>
		<view class="toget" v-for="(item,index) in Info" key="index" @click="getinfo">


			<view class="photo" v-if="item.urlList.length!==0">
				<!-- 				<image
									src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
									mode=""></image> -->
				<image :src="item.urlList[0]" mode=""></image>
			</view>
			<!-- 			<view class="photo" v-else>
								<image
									src="https://lnu-market.oss-cn-guangzhou.aliyuncs.com/2022-10-06/16:22:29-8b47bee75ce5400792163d304d21f7b4.jpg"
									mode=""></image>
							</view> -->
			<view class="info" v-if="item.urlList.length!==0">
				<view class="name">
					失物:{{item.title}}
				</view>
				<view class="describe">
					遗失物品描述：{{item.time}}
				</view>
				<view class="describe2">
					来自：{{item.userName}}
				</view>

			</view>
			
			<view class="info2" v-if="item.urlList.length===0">
				<view class="name">
					失物:{{item.title}}
				</view>
				<view class="describe">
					遗失物品描述：{{item.time}}
				</view>
				<view class="describe2">
					发布者名字：{{item.userName}}
				</view>
			
			</view>
			<view class="watermark">
				失物
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrinfo: [{
						userName: '111',
						title: '高价售卖',
						time: '2022-10',
						place: '音乐厅'
					},
					{
						userName: '111',
						title: '高价售卖',
						time: '2022-10',
						place: '音乐厅'
					}, {
						userName: '111',
						title: '高价售卖',
						time: '2022-10',
						place: '音乐厅'
					}, {
						userName: '111',
						title: '高价售卖',
						time: '2022-10',
						place: '音乐厅'
					},

				]
			}
		},
		props: {
			Info: Object
		},

		methods: {
			getinfo() {
				// console.log(this.allGoods);
			}
		}
	}
</script>

<style lang="less" scoped>
	.toget {
		position: relative;
		// display: flex;
		width: 95%;
		height: 120px;
		background-color: #fff;
		margin: 2.5%;
		border-radius: 10px;
	}

	.photo {
		display: inline-block;
		width: 35%;
		height: 90%;
		margin: 2%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	}

	.info {
		display: inline-block;
		width: 45%;
		height: 100%;
		margin-left: 10px;
	}
	.info2 {
		display: inline-block;
		width: 70%;
		height: 100%;
		margin-left: 10px;
	}

	.name {
		width: 100%;
		height: 24px;
		// text-align: center;
		margin-top: 5px;
		font-size: 20px;
		font-weight: 500;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #3766a3;

	}

	.describe {
		font-size: 16px;
		// color: #aeaeae;
		height: 40px;
		width: 100%;
		margin: 5px 0;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 10px;
	}

	.describe2 {
		font-size: 16px;
		font-weight: 400;
		// color: #aeaeae;
		height: 23px;
		width: 100%;
		// margin-top: 7px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.bottombox {
		display: flex;
		margin: 15px 0 0 0;

		.price {
			display: inline-block;
			// float: right;
			width: 90%;
			color: rgb(255, 85, 0);
			font-size: 18px;
			margin-top: 7px;
		}

		.delet {
			display: inline-block;
			width: 20%;
			height: 30px;
			margin-left: 20px;
			color: #aeaeae;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.watermark {
		position: absolute;
		bottom: 40%;
		right: 3%;
		font-size: 20px;
		font-weight: 400;
		color: #aeaeae;
		// height: 23px;
		// width: 100%;
		z-index: 999;
		color: #3766a3;
	}
</style>
